<!--
 * @Author: 专送Pro
 * @Date: 2019-08-08 10:40:53
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-11 09:21:06
 * @Description: 母版
 -->
<template>
  <Layout class="i-layout">
    <Sider ref="sider" hide-trigger class="i-layout-sider" collapsible :collapsed-width="78" :width="$config.menuWidth" v-model="isCollapsed" :class="['i-layout-sider-' + $theme.siderColor]">
      <div style="height:100vh">
        <div class="i-layout-sider-logo" :class="['i-layout-sider-logo-' + $theme.siderColor]">
          <a href="/" target="_self" v-if="!$theme.headerStick"><img :src="logoImg" /><span>管理平台</span></a>
        </div>
        <wz-menu :menus="menuList" :is-collapsed="isCollapsed" @on-select="onSelect" />
      </div>
    </Sider>
    <Layout>
      <!-- 主体顶部信息 -->
      <wz-header ref="header">
        <template v-slot:collapsible>
          <span class="i-layout-header-trigger i-layout-header-trigger-min" style="position:relative;top:6px;" @click="collapsedSider">
            <wz-icon :name="isCollapsed ? 'menu_open' : 'menu_close'" scale="2.5" />
          </span>
        </template>
      </wz-header>
      <!-- 主体信息 -->
      <Content class="i-layout-content i-layout-content-fix-with-header" style="position:relative">
        <!-- <tags-nav></tags-nav> -->
        <div class="i-layout-page">
          <transition name="fade-transform" mode="out-in" v-if="!loading">
            <router-view />
          </transition>
        </div>
      </Content>
    </Layout>
  </Layout>
</template>

<script>
import { mapActions } from "vuex";
import { wzHeader, wzMenu, tagsNav } from "./components";
export default {
  components: {
    wzHeader,
    wzMenu,
    tagsNav
  },
  data() {
    return {
      logoImg: require("@/assets/images/logo.png"),
      isCollapsed: false,
      meta: {
        bread: [],
        title: ""
      },
      menuList: [],
      loading: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapActions({
      getUserInfoData: "getUserInfoData", // 将 `this.getUserInfoData()` 映射为 `this.$store.dispatch('getUserInfoData')`
      setParentRouter: "setParentRouter"
    }),
    // 获取菜单
    async getData() {
      try {
        const res = await this.getUserInfoData();
        this.menuList = res.system_sysmenus;
      } catch (error) {
        throw error;
      }
    },
    // 点击菜单导航
    onSelect(route) {
      let { name, params, query } = {};
      if (typeof route === "string") name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf("isTurnByHref_") > -1) {
        window.open(name.split("_")[1]);
        return;
      }
      if (this.$route.name === name) return;
      this.$router.push({
        name,
        params,
        query
      });
    },
    // 菜单展开关闭
    collapsedSider() {
      this.$refs.sider.toggleCollapse();
      this.$refs["header"].onCollapse();
      this.$theme["isCollapse"] = !this.$theme["isCollapse"];
      this.$bus.$emit("changeCollapsed", this.isCollapsed);
    }
  },
  mounted() {
    this.meta = this.$route.meta;
  }
};
</script>

<style lang="less">
.i-layout {
  // 左侧菜单
  &-sider {
    min-height: 100vh;
    background: #fff;
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    position: relative;
    z-index: 13;
    &-fix {
      position: fixed;
      top: 0;
      left: 0;
      .i-layout-menu-side {
        height: calc(~"100vh - 64px");
        overflow-y: auto;
      }
    }
    // 暗黑色
    &-dark {
      background: #191a23;
      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    }
    // 亮色
    &-light {
      background: #fff;
    }
    &-logo {
      height: 63px;
      line-height: 63px;
      padding-left: 25px;
      border-bottom: 1px solid #f8f8f9;
      overflow: hidden;
      font-weight: bold;
      img {
        height: 50%;
        vertical-align: middle;
        display: inline-block;
      }
      span {
        font-size: 18px;
        color: #333;
        margin-left: 10px;
      }
      &-dark {
        border-bottom: 1px solid #101117;
        background: #191a23;
        span {
          color: #fff;
        }
      }
    }
  }
  // 主体内容
  &-inside {
    min-height: 100vh;
    transition: all 0.2s ease-in-out;
    &-fix-with-sider {
      padding-left: 200px;
    }
  }
  &-content {
    &-fix-with-header {
      padding-top: 64px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100vh;
    }
  }
  &-page {
    padding: 20px;
    overflow: auto;
    flex: auto;
  }
  .page {
    background: #fff;
    padding: 20px;
    min-height: 100%;
  }
}
</style>
